<template>
  <div :id="question.questionId" class="question-container">
    <div class="question-content">
      <!-- 题目 -->
      <div class="question-title">
        <span>{{ index }}.</span>
        <span>
          【<enum-view :enum-name="'QuestionType'" :enum-value="question.questionType" />】
          <span v-html="question.questionTitle"></span>
          <span>（{{ question.questionScore }}分）</span>
        </span>
      </div>
      <!-- 选项 -->
      <div class="question-option">
        <!-- 单选题 -->
        <div v-if="question.questionType === 1">
          <div class="question-option-item">
            <div v-for="(item, index) in question.options" :key="index">
              <div class="item">
                <img v-if="item.optionStatus === 1" src="@/assets/svg/paper/circle_correct.svg" />
                <img v-if="item.optionStatus === 2" src="@/assets/svg/paper/circle_wrong.svg" />
                <img v-if="item.optionStatus === 3" src="@/assets/svg/paper/circle_default.svg" />
                <span>&nbsp;{{ changeNumToEn(index) }}、</span>
                <span v-html="item.optionContent" />
              </div>
            </div>
          </div>
        </div>
        <!-- 多选题 -->
        <div v-if="question.questionType === 2">
          <div class="question-option-item">
            <div v-for="(item, index) in question.options" :key="index">
              <div class="item">
                <img v-if="item.optionStatus === 1" src="@/assets/svg/paper/square_correct.svg" />
                <img v-if="item.optionStatus === 2" src="@/assets/svg/paper/square_wrong.svg" />
                <img v-if="item.optionStatus === 3" src="@/assets/svg/paper/square_default.svg" />
                <span>&nbsp;{{ changeNumToEn(index) }}、</span>
                <span v-html="item.optionContent" />
              </div>
            </div>
          </div>
        </div>
        <!-- 判断题 -->
        <div v-if="question.questionType === 3">
          <div class="question-option-item">
            <div v-for="(item, index) in question.options" :key="index">
              <div class="item">
                <img v-if="item.optionStatus === 1" src="@/assets/svg/paper/circle_correct.svg" />
                <img v-if="item.optionStatus === 2" src="@/assets/svg/paper/circle_wrong.svg" />
                <img v-if="item.optionStatus === 3" src="@/assets/svg/paper/circle_default.svg" />
                &nbsp;<span v-html="item.optionContent" />
              </div>
            </div>
          </div>
        </div>
        <!-- 填空题 -->
        <div v-if="question.questionType === 4">
          <div v-for="(item, index) in question.optionCount" :key="index">
            <div class="item4">
              空{{ item }}：
              <el-input v-model="question.userAnswer4[index]" disabled />
              <span v-if="question.userAnswer4[index] !== question.questionAnswer4[index]"> <img src="@/assets/svg/paper/circle_wrong.svg" /> 答案：{{ question.questionAnswer4[index] }} </span>
              <span v-else><img src="@/assets/svg/paper/circle_correct.svg" /></span>
            </div>
          </div>
        </div>
        <!-- 简答题 -->
        <div v-if="question.questionType === 5"></div>
      </div>
      <!-- 答案分析 -->
      <div class="question-result text-color">
        <!-- 答案 -->
        <div class="question-answer">
          <!-- 单选题 -->
          <span v-if="question.questionType === 1">
            <span>
              正确答案：
              <span v-for="(item, index) in question.options" :key="index">
                <span v-if="question.questionAnswer === item.optionContent" class="symbol">{{ changeNumToEn(index) }}</span>
              </span>
            </span>
            <span class="ml20">
              学员答案：
              <span v-for="(item, index) in question.options" :key="index">
                <span v-if="question.userAnswer === item.optionContent" class="symbol">{{ changeNumToEn(index) }}</span>
              </span>
            </span>
          </span>
          <!-- 多选题 -->
          <span v-if="question.questionType === 2">
            <span>
              正确答案：
              <span v-for="(item, index) in question.options" :key="index">
                <span v-if="question.questionAnswer2 && question.questionAnswer2.indexOf(item.optionContent) > -1" class="symbol">{{ changeNumToEn(index) }}&nbsp;</span>
              </span>
            </span>
            <span class="ml20">
              学员答案：
              <span v-for="(item, index) in question.options" :key="index">
                <span v-if="question.userAnswer2 && question.userAnswer2.indexOf(item.optionContent) > -1" class="symbol">{{ changeNumToEn(index) }}&nbsp;</span>
              </span>
            </span>
          </span>
          <!-- 判断题 -->
          <span v-if="question.questionType === 3">
            <span>正确答案：{{ question.questionAnswer }}</span>
            <span class="ml20">学员答案：{{ question.userAnswer }}</span>
          </span>
          <!-- 填空题 -->
          <div v-if="question.questionType === 4"></div>
          <!-- 简答题 -->
          <span v-if="question.questionType === 5">
            <div>正确答案：<span v-html="question.questionAnswer" /></div>
            <div>学员答案：<span v-html="question.userAnswer" /></div>
          </span>
          <div>
            <span>最终得分：{{ question.userScore }} 分</span>
            <span> (本题分数 {{ question.questionScore }} 分)</span>
          </div>
        </div>
        <!-- 解析 -->
        <div v-if="question.questionAnalysis" class="question-Analysis">解析：<span v-html="question.questionAnalysis" /></div>
        <el-divider v-if="question.aiGrading" style="background-color: #f5f5f4">AI评阅</el-divider>
        <!-- AI评阅 -->
        <div v-if="question.aiGrading">AI用户得分：{{ question.aiUserScore }}</div>
        <div v-if="question.aiGrading">AI评分依据：{{ question.aiGradingReason }}</div>
      </div>
    </div>
    <div class="question-score">
      得分：
      <el-input-number v-model="question.userScore" controls-position="right" class="min-number" />
      <br /><br />
      <el-input v-model="question.evaluationComment" type="textarea" :rows="3" :maxlength="500" placeholder="请输入评语" show-word-limit />
    </div>
  </div>
</template>

<script setup>
  import { changeNumToEn } from '@/utils/base'
  import { onMounted, toRefs } from 'vue'
  import EnumView from '@/components/Enum/View/index.vue'

  const props = defineProps({
    question: {
      // 题目
      type: Object,
      default: () => {}
    },
    index: {
      // 题号
      type: Number,
      default: 0
    }
  })
  const { question } = toRefs(props)

  onMounted(() => {
    // 处理题目答案
    if (question.value.questionType === 1) {
      // 单选题
      question.value.options.forEach((item, index) => {
        item.optionStatus = 3
        if (question.value.questionAnswer === item.optionContent) {
          item.optionStatus = 1
        }
        if (question.value.userAnswerStatus === 1) {
          // 答错特别标记
          if (question.value.userAnswer === item.optionContent) {
            item.optionStatus = 2
          }
        }
      })
    }
    if (question.value.questionType === 2) {
      // 多选题
      question.value.options.forEach((item, index) => {
        item.optionStatus = 3
        if (question.value.questionAnswer2.indexOf(item.optionContent) > -1) {
          item.optionStatus = 1
        }
        if (question.value.userAnswerStatus === 1) {
          // 答错特别标记
          if (question.value.userAnswer2.indexOf(item.optionContent) > -1) {
            item.optionStatus = 2
          }
        }
      })
    }
    if (question.value.questionType === 3) {
      // 判断题
      question.value.options.forEach((item, index) => {
        item.optionStatus = 3
        if (question.value.questionAnswer === item.optionContent) {
          item.optionStatus = 1
        }
        if (question.value.userAnswerStatus === 1) {
          // 答错特别标记
          if (question.value.userAnswer === item.optionContent) {
            item.optionStatus = 2
          }
        }
      })
    }
  })
</script>
<style lang="scss" scoped>
  .question-container {
    display: flex;
    padding: 20px;
    border-bottom: solid 1px #dcdfe6;

    .question-content {
      flex: 1;
      margin-bottom: 10px;

      background-color: #fff;
      border-radius: 5px;
      font-size: 16px;
      line-height: 50px;

      .question-title {
        display: flex;
        line-height: 25px;
      }

      .question-option {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;

        .question-option-item {
          display: flex;
          flex-direction: column;
          justify-content: flex-start;

          .item {
            display: flex;
            align-items: center;
          }
        }
      }

      .question-result {
        background-color: #f5f5f4;
        color: #777;
        margin-top: 20px;
        padding: 10px 20px;
        border-radius: 5px;
        line-height: 25px;
        font-size: 14px;
      }
    }

    .question-score {
      width: 20%;
      min-width: 150px;
      margin-left: 20px;
    }

    .item4 {
      :deep(.el-input) {
        width: 250px;
        margin: 0 10px;
      }
    }

    :deep(p) {
      margin: 0;
      display: inline;
    }

    :deep(img) {
      vertical-align: middle;
    }
  }
</style>
<style lang="scss">
  .question-result .el-divider__text {
    background-color: #f5f5f4 !important;
    font-weight: bold;
  }
</style>
